/* Limit Startup.css — Apple 风格重写
   令牌直接来自 DESIGN-apple.md (alpha)
   字体: SF Pro Display / SF Pro Text 系统栈，
         非 Apple 平台回退到 Inter (Google Fonts)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ========== Design Tokens (from DESIGN-apple.md) ========== */
:root {
  /* colors */
  --color-primary: #0066cc;
  --color-primary-focus: #0071e3;
  --color-primary-on-dark: #2997ff;
  --color-ink: #1d1d1f;
  --color-body: #1d1d1f;
  --color-body-on-dark: #ffffff;
  --color-body-muted: #cccccc;
  --color-ink-muted-80: #333333;
  --color-ink-muted-48: #7a7a7a;
  --color-divider-soft: #f0f0f0;
  --color-hairline: #e0e0e0;
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7;
  --color-surface-pearl: #fafafc;
  --color-surface-tile-1: #272729;
  --color-surface-tile-2: #2a2a2c;
  --color-surface-tile-3: #252527;
  --color-surface-black: #000000;
  --color-surface-chip-translucent: #d2d2d7;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;
  --color-success: #00a74a;
  --color-danger: #f03752;

  /* liquid-glass tokens (shuding/liquid-glass 真实 SVG filter 实现)
     核心: backdrop-filter: url(#liquid-glass) 引用 SVG <filter>
     元素本身几乎透明, 视觉来自 SVG 对背后内容的模糊+提亮+裁剪 */
  --glass-bg: rgba(255, 255, 255, 0.05);          /* 几乎透明, 让 SVG filter 透出 */
  --glass-bg-strong: rgba(255, 255, 255, 0.1);
  --glass-bg-soft: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.25);      /* 1px 柔光边框 */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.16);

  --glass-radius: 22px;
  --glass-radius-sm: 14px;

  /* typography scale */
  --fs-hero: 56px;
  --fs-display-lg: 40px;
  --fs-display-md: 34px;
  --fs-lead: 28px;
  --fs-lead-airy: 24px;
  --fs-tagline: 21px;
  --fs-body-strong: 17px;
  --fs-body: 17px;
  --fs-caption: 14px;
  --fs-caption-strong: 14px;
  --fs-button-large: 18px;
  --fs-button-utility: 14px;
  --fs-fine-print: 12px;
  --fs-micro-legal: 10px;
  --fs-nav-link: 12px;

  /* line-heights */
  --lh-hero: 1.07;
  --lh-display-lg: 1.1;
  --lh-display-md: 1.47;
  --lh-lead: 1.14;
  --lh-lead-airy: 1.5;
  --lh-tagline: 1.19;
  --lh-body-strong: 1.24;
  --lh-body: 1.47;
  --lh-button-large: 1.0;
  --lh-button-utility: 1.29;
  --lh-caption: 1.43;
  --lh-caption-strong: 1.29;
  --lh-fine-print: 1.0;
  --lh-micro-legal: 1.3;
  --lh-nav-link: 1.0;

  /* rounded */
  --r-none: 0px;
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;
  --r-full: 9999px;

  /* spacing */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 17px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 80px;

  /* font stacks */
  --font-display: "SF Pro Display", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-text: "SF Pro Text", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}


/* ========== Reset / base ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: -0.374px;
  color: var(--color-body);
  background-color: var(--color-canvas);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 隐藏默认下拉箭头 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  color: inherit;
}
select::-ms-expand { display: none; }

/* 滚动条 */
::-webkit-scrollbar { width: 0; height: 0; }
::-webkit-scrollbar-thumb { background-color: var(--color-ink-muted-48); border-radius: 32px; }
::-webkit-scrollbar-track { border-radius: 32px; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-focus); }
img { max-width: 100%; display: block; }

/* ========== Global app shell ========== */
.main {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--s-md);
}

/* 全局变暗遮罩 (Apple modal 风格: 浅黑 + 强 backdrop-blur 形成毛玻璃) */
.opacity_bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 115;
  display: none;
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: opacity 0.32s ease;
}
.opacity_bg.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ========== Toast: Welcome Back / 设置成功 ========== */
.success,
.setsuccess {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 70;
  /* shuding/liquid-glass 真实实现 (与 .search_btn / .engine_popover 同款) */
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  color: var(--color-ink);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: -0.374px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 0.3s ease;
  pointer-events: none;
  display: flex !important;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transform: translate(-50%, -160%);
  opacity: 0;
}
.setsuccess svg { color: var(--color-success); width: 18px; height: 18px; }

/* ========== Time / Date strip ========== */
.showTime {
  margin: 18vh auto 0;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 400;
  letter-spacing: 0.196px;
  line-height: var(--lh-lead);
  color: var(--color-body);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  width: 100%;
}

/* ========== Search hero ========== */
.box {
  margin: 28px auto 0;
  width: 100%;
  max-width: 720px;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  user-select: none;
}

#data { flex: 0 0 auto; }

/* ========== 首页自定义搜索引擎下拉 — 同一胶囊向下展开 ==========
   核心: 一个 .engine_popover 容器, 关闭态只显示 face (label + chevron),
   展开态 height 从 44 平滑增长, 同一套 pill 圆角, face 淡出 / 4 个 row 按序淡入 */

.engine_picker {
  position: relative;
  flex: 0 0 auto;
  width: 120px;
  height: 44px;
  align-self: center;  /* 在 .box 中垂直居中, 不受 .inputBox 高度变化影响 */
}

.engine_popover,
.engine_popover.glass {
  /* 绝对定位, 高度变化不影响外部 flex 布局 */
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 44px;
  z-index: 70;
  border-radius: 22px;
  /* shuding/liquid-glass 真实实现: SVG filter 引用 */
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition:
    height 0.36s cubic-bezier(0.19, 1, 0.22, 1),
    border-radius 0.36s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
  /* 关键: 关闭态和展开态都使用固定像素值(不用 9999), 避免浏览器把圆角
     跟 height 走, 消除"先拉长后变平"的撕裂 */
  will-change: height, border-radius;
}
.engine_popover:hover {
  /* 不用背景色变化（避免整个下拉变白）; 改用边框高亮 + 阴影增强 */
  background-color: var(--glass-bg-strong);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: var(--glass-shadow-hover);
}
.engine_popover:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--glass-shadow), 0 0 0 3px rgba(0, 102, 204, 0.18);
}
.engine_picker.is-open .engine_popover {
  height: 168px;
  /* 展开态: 4 角 22 (与关闭态完全相同, 高度从 44 长到 168, 圆角像素值不变)
     视觉: 胶囊被"纵向拉长" — 顶角和底角弧度都是 22px 像素, 看起来像"水球拉高"
     高度 168 = 4 行 × 36 + list 上下 padding 8 + list 上下 padding 8 = 168 */
  border-radius: 22px;
  box-shadow: var(--glass-shadow), 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* 关闭态显示的 face: 居中 label + chevron */
.engine_face {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  color: var(--color-ink);
  opacity: 1;
  transition: opacity 0.18s ease;
}
.engine_picker.is-open .engine_face { opacity: 0; pointer-events: none; }
.engine_face_label { display: inline-block; min-width: 1em; }
.engine_face_chev {
  width: 14px;
  height: 14px;
  color: var(--color-ink-muted-48);
  transition: transform 0.32s cubic-bezier(0.19, 1, 0.22, 1);
}
.engine_picker.is-open .engine_face_chev { transform: rotate(180deg); }

/* 展开态显示的列表: 顶 padding 8 + 4 行 × 36 行高 + 底 8 ≈ 160, 加 face 44 = 200+ */
.engine_list {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  /* 不用 flex column (避免 4 行均分高度, 看起来"居中"), 改用普通 block, 4 行自然贴顶 */
  padding: 8px 4px;
  border-radius: 22px;
  background: transparent;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.engine_picker.is-open .engine_list {
  opacity: 1;
  transform: translateY(0);
}
.engine_list[hidden] { display: none; }
.engine_picker.is-open .engine_list { display: block; }

.engine_row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  color: var(--color-ink);
  cursor: pointer;
  outline: none;
  transition: background-color 0.12s ease, color 0.12s ease;
  user-select: none;
  /* 行默认隐藏, 展开时按序淡入 */
  opacity: 0;
  transform: translateY(-2px);
}
.engine_picker.is-open .engine_row {
  opacity: 1;
  transform: translateY(0);
  transition:
    background-color 0.12s ease,
    color 0.12s ease,
    opacity 0.24s ease,
    transform 0.24s cubic-bezier(0.19, 1, 0.22, 1);
}
.engine_picker.is-open .engine_row:nth-child(1) { transition-delay: 0.12s, 0.12s, 0.12s, 0.12s; }
.engine_picker.is-open .engine_row:nth-child(2) { transition-delay: 0.12s, 0.12s, 0.16s, 0.16s; }
.engine_picker.is-open .engine_row:nth-child(3) { transition-delay: 0.12s, 0.12s, 0.20s, 0.20s; }
.engine_picker.is-open .engine_row:nth-child(4) { transition-delay: 0.12s, 0.12s, 0.24s, 0.24s; }

.engine_row:hover,
.engine_row:focus-visible {
  /* 选项 hover: 用极弱的透明灰 (0.04) 代替实心白 #f0f0f0, 玻璃感下不会"过曝"
     文字变蓝作为 hover 反馈 */
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--color-primary);
}
.engine_row:active {
  background-color: rgba(0, 0, 0, 0.08);
  transform: scale(0.98);
}
.engine_row.is-active {
  color: var(--color-primary);
  font-weight: 500;
}
.engine_row_label { flex: 1 1 auto; }
.engine_row_check {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--color-primary);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.engine_row.is-active .engine_row_check {
  opacity: 1;
  transform: scale(1);
}

.inputBoxWrap {
  /* 外壳: 永远 44px flex item -> 兄弟按钮位置永远不动 */
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  align-self: center;
}

.inputBox,
.inputBox.glass {
  /* 内部: absolute 撑满 wrap, 自己从 44 -> 44+内容 拉高 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  border-radius: 22px;
  /* shuding/liquid-glass 真实实现 */
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: visible;
  transition:
    height 0.36s cubic-bezier(0.19, 1, 0.22, 1),
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
  will-change: height;
}
/* 聚焦/有内容时: .inputBox 边框变蓝, 阴影变明显
   注意: 这个规则只对 .inputBox 元素本身生效, 不要把 .inputBox input 也包括进来
   否则会把整个 .inputBox 的 border/background/border-radius 清零 */
.inputBox:focus-within,
.inputBox.is-suggesting {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
}

/* input 自身不画 border/background, 由 .inputBox 统一画 */
.inputBox input {
  width: 100%;
  height: 44px;
  padding: 0 18px 0 18px;
  border: 0;
  background: transparent;
  border-radius: 0;
  outline: none;
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: -0.374px;
}
.inputBox input::placeholder { color: transparent; }
/* 当联想词下拉展开时, 输入框底边圆角消失, 让下拉无缝拼接 */
.inputBox.is-suggesting input,
.inputBox input:focus,
.inputBox input:not(:placeholder-shown) {
  border-radius: 22px 22px 0 0;
}

/* span 默认覆盖在 input 中央，作为 mock placeholder。
   浮起后，span 上移到 input 顶部外侧，文字底部贴着 input 上边框。 */
.inputBox span {
  position: absolute;
  left: 18px;
  top: 0;
  height: 44px;
  line-height: 44px;
  pointer-events: none;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  color: var(--color-ink-muted-48);
  letter-spacing: -0.374px;
  text-transform: uppercase;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease,
              transform 0.2s ease, line-height 0.2s ease,
              letter-spacing 0.2s ease;
  background-color: transparent;
  padding: 0 4px;
  white-space: nowrap;
  transform-origin: left bottom;
}
.inputBox input:focus ~ span,
.inputBox input:not(:placeholder-shown) ~ span {
  /* label 浮起到 .inputBox 外侧顶部: label 底部 (14px) 对齐 .inputBox 顶部 (0px)
     完全在外侧, 不挡 .inputBox 边框 */
  top: -14px;
  height: 14px;
  line-height: 14px;
  font-size: 11px;
  color: var(--color-ink-muted-48);
  letter-spacing: 0.6px;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* ========== 联想词下拉 — 跟引擎下拉一致的"水滴展开"效果 ==========
   关键: border-radius 用固定像素 (22) 不用百分比/跟 height 走,
   height 从 0 用 max-height 模拟"拉长"动画, 视觉上像"水球被纵向拉高" */
/* 关键设计: 联想词下拉跟输入框"无缝对接", 视觉上合二为一
   - top 0: 紧贴输入框底部
   - 上方圆角 0: 跟输入框底边直角对接
   - 左右下圆角 22: 跟输入框胶囊的圆角对称, 形成"水滴下垂"效果
   - 展开时高度从 0 平滑增长, 整个下拉"从输入框底部长出来" */
/* 关键: left/right -1px 覆盖输入框 1px 边框, box-shadow 只在下方,
   让下拉跟输入框视觉上"无缝" */
/* ========== 联想词下拉 — 完全照搬 engine_popover 的"水球拉高"效果 ==========
   核心: height 0 -> auto (JS 动态设置像素值) + border-radius 22px 固定
   视觉: 跟 Bing 引擎下拉一致, 圆角 22 像素值不变, 高度从 0 拉到内容高度
   看起来像"水球被纵向拉高" */
/* ========== 联想词下拉 — "水球拉高"效果: .inputBox 整体高度变化 ==========
   关键: 跟 engine_popover 完全一样的机制
   - #datalist 是 .inputBox 内部静态内容 (不是绝对定位浮在外面)
   - .inputBox 高度从 44px (关闭) 拉到 N+44px (展开)
   - 圆角 22px 始终不变 -> 看起来"水球被纵向拉高"
   - 没有"拼接", .inputBox 自己就是那个"水球" */
#datalist {
  /* absolute 定位在 .inputBox 内部, top: 44 = input 高度, 占据下半 */
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 320px;  /* 上限 10 条, 超出滚动 */
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  overflow-y: auto;
  /* 透明背景 -> 借用 .inputBox 自身的液态玻璃背景, 视觉与输入框无缝 */
  background: transparent;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  transition: opacity 0.22s ease;
}
#datalist.is-open {
  padding: 4px 0 8px 0;
  opacity: 1;
}
#datalist li {
  list-style: none;
  padding: 0;
  min-width: 0;  /* 防止 li 被内容撑开 */
  /* li 立即显示, 不做 stagger 动画 */
  transition: background-color 0.12s ease, color 0.12s ease;
}

#datalist li a {
  display: flex !important;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: -0.224px;
  border-radius: 10px;
  text-decoration: none;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.12s ease, color 0.12s ease;
}
#datalist li:hover { background: transparent; }
#datalist li a:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--color-primary);
}

/* ========== Search button (pill) ========== */
.buttonBox {
  flex: 0 0 auto;
  align-self: center;  /* 在 .box 中垂直居中, 不受 .inputBox 高度变化影响 */
}
.search_btn,
.search_btn.glass {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-pill);
  /* shuding/liquid-glass 真实实现: 蓝色玻璃 (不透明 0.85 让蓝色更饱和) */
  background-color: rgba(0, 102, 204, 0.85);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  color: var(--color-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.22s ease;
  padding: 0;
}
.search_btn svg { width: 22px; height: 22px; fill: currentColor; }
.search_btn:hover {
  background-color: rgba(0, 113, 227, 0.95);
}
.search_btn:active { transform: scale(0.96); }
.search_btn:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

/* ========== About modal ========== */
.about,
.about.glass {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 120;
  width: min(640px, 92vw);
  height: 86vh;             /* 固定高度, 与其他弹窗一致 */
  max-height: 86vh;
  display: flex !important;
  flex-direction: column;
  /* shuding/liquid-glass 真实实现 */
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  padding: 28px 32px 32px;
  text-align: left;  /* 默认左对齐, 跟其他弹窗一致 (Apple system-settings 风格) */
  transform: translate(-50%, -50%) scale(0.96);
  transform-origin: center top;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: var(--glass-shadow), var(--glass-inner),
    0 12px 24px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.12);
  transition:
    opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.32s;
}
.about.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0s;
}
.close_about_btn_box { display: none; } /* about 弹窗已迁移到 .setting_btn_box 风格 */
.close_about_btn,
.close_about_btn.glass {
  border: 1px solid rgba(255, 255, 255, 0.45);
  /* shuding/liquid-glass 真实实现: 红色玻璃 (与搜索按钮同尺寸) */
  background-color: rgba(220, 53, 69, 0.85);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.22);
  cursor: pointer;
  width: 44px;
  height: 44px;
  margin-right: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #ffffff;
  transition: background-color 0.2s ease, box-shadow 0.22s ease, transform 0.15s ease;
}
.close_about_btn:hover {
  background-color: rgba(220, 53, 69, 0.95);
  box-shadow: 0 6px 18px rgba(220, 53, 69, 0.32);
}
.close_about_btn:active { transform: scale(0.96); }
.close_about_btn svg { width: 22px; height: 22px; }

.about_text { padding: 8px 0 16px; }
.about_text svg { max-width: 60%; height: auto; margin: 0 auto; }
.version {
  margin-top: 12px;
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  color: #000;
  letter-spacing: -0.224px;
}
#count_days {
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  color: #000;
  letter-spacing: -0.224px;
}

.update_text {
  text-align: left;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-ink-muted-80);
}
.update_text > span { display: inline-block; margin-right: 4px; }
.update_text .add_ui_box,
.update_text .update_ui_box,
.update_text .fix_ui_box,
.update_text .del_ui_box {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro-legal);
  font-weight: 600;
  letter-spacing: 0;
  margin-right: 4px;
  line-height: var(--lh-micro-legal);
  vertical-align: middle;
}
.add_ui_box,
.update_ui_box,
.fix_ui_box,
.del_ui_box {
  display: inline-flex !important;
  align-items: center;
  height: 20px;
  padding: 0 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  vertical-align: middle;
}
.add_ui_box    { background: #e3f4ea; color: #1a7f37; }
.update_ui_box { background: #e7eefe; color: #1f4f99; }
.fix_ui_box    { background: #fdecea; color: #b3261e; }
.del_ui_box    { background: #f0f0f0; color: #555555; }

/* ========== Settings / FAQ / 声明 modal (shared) ========== */
.settings_box,
.jump_out_box,
.settings_box.glass,
.jump_out_box.glass {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 120;
  height: 88vh;            /* 固定高度, 4 个弹窗大小一致 */
  max-height: 88vh;
  display: flex !important;
  flex-direction: column;
  /* shuding/liquid-glass 真实实现 */
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  padding: 24px 28px 32px;  /* 底部多 4px 给浮出的 tab 栏阴影留空间 */
  transform: translate(-50%, -50%) scale(0.96);
  transform-origin: center top;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.12);
  transition:
    opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.32s;
}
/* settings 弹窗加宽 (容纳侧栏 200px + 内容区): 880px, 只作用于 .settings_box, 不影响 .jump_out_box (声明/FAQ) */
.settings_box,
.settings_box.glass { width: min(880px, 94vw) !important; }
.jump_out_box,
.jump_out_box.glass { width: min(720px, 94vw); }
.settings_box.is-open,
.jump_out_box.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0s;
}

/* 弹窗标题区: 标题 + 副标题, 居左, 跟 close 按钮水平排列 */
.settings_box_heading {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings_box_subtitle {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.078px;
  line-height: 1.23;
  color: #000;
}

/* 弹窗内文 text-link (Apple Action Blue, no underline) */
.text_link {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.text_link:hover {
  color: var(--color-primary-focus);
  border-bottom-color: var(--color-primary-focus);
}
.text_link:active { transform: scale(0.98); display: inline-block; }

/* ========== shengming_box: 声明 ordered list (DESIGN dense-link 排版) ========== */
.legal_list {
  margin: 0;
  padding-left: 22px;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: -0.374px;
  line-height: 2.41;  /* DESIGN dense-link: 17px / 2.41 line-height */
  color: var(--color-ink);
  list-style: decimal;
}
.legal_list li {
  padding-left: 4px;
}
.legal_list li::marker {
  color: #000;
  font-variant-numeric: tabular-nums;
}

/* ========== question_box: Q/A list ========== */
.qa_list {
  display: flex !important;
  flex-direction: column;
  gap: 20px;
}
.qa_item {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.qa_q {
  margin: 0;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.224px;
  line-height: 1.4;
  color: var(--color-ink);
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
}
.qa_a {
  margin: 0;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  line-height: 1.55;
  color: var(--color-ink-muted-80);
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
}
/* Q/A chip — 22x22 圆形 mini icon */
.qa_chip {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.qa_chip_q { background: var(--color-primary); color: var(--color-on-primary); }
.qa_chip_a { background: var(--color-ink-muted-48); color: #ffffff; }

/* 弹窗底部插图 (跟内文分隔, 不喧宾夺主) */
.modal_footer_illustration {
  margin-top: 8px;
  border-radius: 14px;
  overflow: hidden;
}
.modal_footer_illustration img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========== about modal: hero + milestone + changelog ========== */
.about_hero {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 0 4px;
  text-align: center;  /* 显式居中 - 覆盖 .about 的 left */
  margin-bottom: 8px;
}
.about_hero_logo {
  width: 100%;
  display: flex !important;
  justify-content: center;
  margin-bottom: 4px;
  color: var(--color-ink);
}
.about_hero_logo_img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  /* logo.png 是深色背景 + 亮色文字, 本身自包含, 不需要 color 调整 */
}
.about_hero_version {
  display: flex !important;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}
.about_hero_meta {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}
.about_version_badge,
.about_version_badge.glass {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  /* shuding/liquid-glass 真实实现 */
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  color: var(--color-ink-muted-80);
  border-radius: 9999px;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.about_credits {
  margin: 0;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  line-height: 1.5;
  color: var(--color-ink-muted-80);
  text-align: center;
  display: inline;
}
.about_credits + .about_credits::before { content: " "; }
.about_credits + .about_credits { margin-left: 0; }

.about_milestone {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.about_milestone_text {
  flex: 1 1 auto;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.224px;
  line-height: 1.4;
  color: #000;
  text-align: left;
  min-width: 0;
  word-wrap: break-word;
}
.about_milestone_text strong {
  color: var(--color-primary);
  font-weight: 700;
}
.about_milestone_img {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  background-color: var(--color-canvas);
  flex-shrink: 0;
}

/* 更新日志 (按 DESIGN dense-link 排版: 17px / 2.41 line-height) */
.changelog {
  display: flex !important;
  flex-direction: column;
  gap: 22px;
}
.changelog_version {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}
.changelog_version_head {
  display: flex !important;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-hairline);
}
.changelog_version_tag {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.224px;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.changelog_version_date {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  color: var(--color-ink-muted-48);
  font-variant-numeric: tabular-nums;
}
.changelog_items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.changelog_item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 10px;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.078px;
  line-height: 1.6;
  color: var(--color-ink-muted-80);
  text-align: left;
}
.changelog_tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
  /* grid item: 垂直居中到第一行 (item 高度 20.8px, chip 高度 20px, 居中需要 +0.4 ~ +1px) */
  align-self: start;
  margin-top: 1px;
  white-space: nowrap;
}
/* 液态玻璃 chip: 4 种颜色半透明 + 1px hairline + 高光 */
.changelog_tag--new {
  background-color: rgba(218, 245, 227, 0.7);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(29, 122, 58, 0.25);
  color: #1d7a3a;
}
.changelog_tag--improve {
  background-color: rgba(220, 234, 255, 0.7);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(10, 78, 163, 0.25);
  color: #0a4ea3;
}
.changelog_tag--fix {
  background-color: rgba(252, 229, 227, 0.7);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(179, 38, 30, 0.25);
  color: #b3261e;
}
.changelog_tag--remove {
  background-color: rgba(235, 235, 237, 0.7);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid rgba(94, 94, 99, 0.25);
  color: #5e5e63;
}
.changelog_msg {
  min-width: 0;
  word-wrap: break-word;
  text-align: left;
}

.setting_btn_box {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;  /* 固定 header, 不参与滚动 */
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: 20px;
}
.settings_box_title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.374px;
  line-height: 1.2;
  color: var(--color-ink);
}

.settings_main_box {
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;  /* 占据 header 之外全部高度 */
  min-height: 0;   /* 关键: 允许 flex 子项收缩到容器高度内, overflow-y 才能生效 */
  overflow-y: auto;  /* 内容超出时独立滚动, header 保持固定 */
  text-align: left;  /* 显式左对齐, 跟 DESIGN 一致 */
  padding-right: 4px;  /* 给滚动条留一点视觉空间, 避免内容贴边 */
}
/* ============================================================
   Settings 弹窗分页 + 底部 tab 栏 (v4 最终版: absolute 浮 + body padding-bottom 留通行道)
   结构: .settings_box > header / .settings_body > (.settings_pages + .settings_tabbar_wrap > nav)
   - 弹窗 max-height: 88vh
   - .settings_body flex column, flex:1, min-height:0, 不加 padding-bottom
   - .settings_pages flex:1 + overflow-y:auto + min-height:0, 占满 body 全部高度
   - .settings_tabbar_wrap position:absolute + left:50% + bottom:16px + transform: translateX(-50%) + width: min(420px, calc(100% - 32px))
   - .settings_tabbar, .settings_sidebar transform: none 显式覆盖 menu.css 的 nav { transform: translateX(-100%) } (菜单抽屉关闭态规则)
   关键: 之前几轮 flex/absolute 方案都没看到根本问题——nav 被 menu.css 的全局 nav 选择器命中平移 -100% 跑出弹窗
   ============================================================ */

/* .settings_box 主规则 (line 760-) 已经有: position:fixed + top/left:50% + transform: translate(-50%,-50%) scale(0.96) + max-height: 88vh + display:flex flex-direction:column
   这里只补: .settings_box 内部布局 (header 固定, body 滚动, tab 贴底) */

.settings_box {
  /* 仅作用于 settings 弹窗; jump_out_box 共享主规则但不用这个 */
  text-align: left;
}

/* 弹窗内 body: header 之下, pages 的 flex 列容器
   不加 padding-bottom: tab 用 absolute 浮在 .settings_box 底部, pages 占满 body 全部高度
   这样 pages 滚到最底时内容延伸到 tab 视觉位置之下 (iOS 时钟 App 真实行为, tab 浮在上面透出来) */
.settings_body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
}

/* 内容区: 弹窗主滚动容器 */
.settings_pages {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;            /* 关键: 允许收缩, 让出底部 tab 栏 */
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding-right: 4px;        /* 滚动条视觉空间 */
  padding-bottom: 80px;     /* 给底部 tab 栏让出通行道, 滚到最底不被遮挡 */
  text-align: left;
}

/* 底部 tab 栏 wrap: 弹窗内底部水平居中浮起 (iOS 时钟 App 风格)
   关键: position: absolute + bottom: 16px + left: 50% + transform: translateX(-50%) 浮在 .settings_box 底沿
   .settings_body 不加 padding-bottom, pages 占满 body 全部高度, 弹窗自身 overflow 裁切;
   滚到最底时 pages 内容延伸到 tab 视觉位置之下, tab 浮在上面 (液态玻璃半透明) 透出下方内容
   配套 .settings_tabbar, .settings_sidebar 的 transform: none 覆盖 menu.css 的 nav { transform: translateX(-100%) } */
.settings_tabbar_wrap {
  /* 浮在 .settings_box 底部 16px 内, 水平居中 (iOS 时钟 App 风格)
     用 absolute 相对 .settings_box (fixed 祖先) 作为 containing block
     .settings_body 用 padding-bottom 留出 tab 高度的通行道避免遮住最后内容 */
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  /* 限宽 420, 弹窗窄时跟随 (减 32px 留左右边距) */
  width: min(420px, calc(100% - 32px));
  padding: 0;
  box-sizing: border-box;
}

/* 底部 tab 栏: iOS 时钟 App 风格胶囊, 液态玻璃 + 3 tab 平均分布 */
.settings_tabbar,
.settings_sidebar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  /* 关键: menu.css 的 nav { transform: translateX(-100%) } 是菜单抽屉关闭态规则,
     但因为这个 nav 没有更具体的 transform 覆盖, 它直接继承 -100% 平移, 整个 tab 跑出弹窗外
     这里显式 transform: none 覆盖, 锁住位置 */
  transform: none;
  padding: 5px;
  border-radius: var(--r-pill);  /* 拉满圆角, 胶囊完全无棱角 */
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* 单个 tab: 垂直布局 (icon 上, label 下), 横向均分 */
.settings_nav_item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  position: relative;
  z-index: 2;
  padding: 9px 6px 8px;       /* 水平 padding 缩短, 按钮更紧凑 */
  border: 0;
  border-radius: var(--r-pill);  /* 激活态 pill 拉满 */
  background: transparent;
  color: var(--color-ink-muted-80);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.078px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.settings_nav_item:hover {
  background-color: var(--color-divider-soft);
  color: var(--color-ink);
}
/* 滑块: 跟随 is-active 滑动, 液态玻璃背景
   JS 改 transform: translateX(X) + width, transition 让滑动有缓动 */
.tabbar_pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: var(--r-pill);
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  z-index: 1;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
              width 0.38s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.22s ease;
  opacity: 0;
}
.tabbar_pill.is-ready { opacity: 1; }

/* 激活态: 文字蓝色, 背景透明 (由 .tabbar_pill 接管) */
.settings_nav_item.is-active {
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 700;
}

/* tab 内 icon + label */
.settings_nav_icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.settings_nav_icon svg { width: 20px; height: 20px; display: block; }
.settings_nav_label { flex: 1 1 auto; min-width: 0; }

/* tab 右上角 "即将" 徽章 */
.settings_nav_badge {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 5px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  line-height: 1;
}
.settings_nav_item.is-active .settings_nav_badge {
  /* 蓝色玻璃激活态下保留深色徽章, 对比度更稳 */
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
}

.settings_page { display: none; flex-direction: column; gap: 18px; }
.settings_page.is-active { display: flex; }

/* 账号占位卡片 */
.settings_account_placeholder {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0 0;
}
.settings_account_lead {
  margin: 0;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  line-height: 1.5;
  color: var(--color-ink-muted-48);
}
.settings_account_placeholder .diy_bg_but2[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== Section card (Apple system-settings row group) ========== */
.settings_section {
  /* shuding/liquid-glass: section 卡用弱版 filter */
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 18px 20px 20px;
}
.about_milestone_card {
  padding: 16px 20px;
}
.settings_section_head {
  display: flex !important;
  align-items: center;  /* 图标与文字水平基线对齐, 避免图标偏下 */
  gap: 12px;
  margin-bottom: 12px;
}
.settings_section_icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: var(--color-canvas);
  color: var(--color-primary);
}
.settings_section_icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.settings_section_titles {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings_section_title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.231px;
  line-height: 1.19;
  color: var(--color-ink);
}
.settings_section_desc {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  line-height: 1.43;
  color: var(--color-ink-muted-48);
}
.settings_section_body {
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
.settings_subsection_title {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
  color: var(--color-ink);
  padding: 0 0 0 8px;
  min-height: 32px;  /* 跟字段高度一致, 保证间距 */
  display: flex;
  align-items: center;
  position: relative;
  border-left: none;  /* 改用 ::before 画竖线, 高度=行高, 不会跟随元素高度 */
}
.settings_subsection_title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;  /* ≈ 14px * 1.3 行高, 跟文字同高 */
  background-color: #000;
}
.settings_subsection_title--spaced { margin-top: 0; }
.settings_field {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-height: 32px;
  padding-bottom: 12px;
}
.settings_field_label {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.12px;
  line-height: 1.0;
  color: #000;
}
.settings_field_row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 通用设置: 标签-控件行布局 (iOS 系统设置风格) */
.settings_field:has(.settings_field_control) {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 4px 0;
}
/* 联动隐藏: 由父开关控制, 关闭时整个字段淡出 + 不可交互 */
.settings_field.is-dep-hidden {
  display: none;
}
/* 让 label 自身垂直居中于 row (line-height + flex baseline) */
.settings_field:has(.settings_field_control) > .settings_field_label {
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
}
/* 字段之间: 1px 白色细分隔线 (iOS 列表风格), 只在同 section_body 内紧邻的 field 之间 */
.settings_section_body > .settings_field + .settings_field {
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.settings_section_body > *:last-child { padding-bottom: 0; }
.settings_field_control {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* iOS 风格开关 */
.settings_toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.settings_toggle_track {
  display: inline-block;
  width: 40px;
  height: 24px;
  border-radius: 9999px;
  background-color: rgba(120, 120, 128, 0.32);
  position: relative;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.settings_toggle_track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.12);
  transition: transform 0.18s ease;
}
.settings_toggle:checked + .settings_toggle_track {
  background-color: var(--color-primary);
}
.settings_toggle:checked + .settings_toggle_track::after {
  transform: translateX(16px);
}

/* iOS 风格下拉 */
.settings_select {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.224px;
  color: var(--color-ink);
  background-color: rgba(120, 120, 128, 0.12);
  border: none;
  border-radius: 8px;
  padding: 6px 28px 6px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2386868b' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 6px;
  min-width: 70px;
  text-align: center;
}
.settings_select:focus { outline: 2px solid var(--color-primary-focus); outline-offset: 1px; }

/* 兼容旧 .set_choice / .set_title (FAQ 弹窗或旧内容可能用到), 不再强制 display:none */
.set_title { display: none; }
.set_choice,
.set_choice2 { font-size: 14px; color: var(--color-ink-muted-48); }

/* 壁纸选择 */
.bg_choice_main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.bg_choice_small {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;  /* 跟 settings_section 圆角统一 */
  overflow: hidden;
  cursor: pointer;
  background-color: var(--color-canvas);
  transition: transform 0.18s ease, border-color 0.18s ease;
  border: 2px solid transparent;
  outline: 0;
}
.bg_choice_small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.bg_choice_small:hover img { transform: scale(1.04); }
.bg_choice_small:active { transform: scale(0.98); }
.bg_choice_small:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* 选中态: 用 Action Blue (single interactive color) 描边 + 角标 */
.bg_choice_small.is-selected {
  border-color: var(--color-primary);
}
.bg_choice_small.is-selected .check_badge {
  opacity: 1;
  transform: scale(1);
}
.check_badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.check_badge svg { width: 14px; height: 14px; display: block; }

/* 自定义上传: 一个上 label + 下文件行 + 按钮组的清晰分层, 不再一行挤 */
.settings_upload,
.settings_upload.glass {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.settings_upload_field,
.settings_upload_field.glass {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: -0.224px;
  color: var(--color-ink);
  transition: background-color 0.15s ease;
}
.settings_upload_field:hover { box-shadow: var(--glass-shadow); }
.settings_upload_field-label {
  font-weight: 500;
  color: var(--color-ink);
}
.settings_upload_filename {
  flex: 0 1 auto;
  color: var(--color-ink-muted-48);
  font-weight: 400;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings_upload_input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.settings_upload_actions {
  display: flex !important;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
/* 兼容旧 .diy_bg_box, 不强制隐藏, 留作 fallback */
.diy_bg_box,
.diy_bg { display: none; }
.diy_bg_but,
.diy_bg_but2,
#change-btn {
  border: 0;
  cursor: pointer;
  height: 36px;
  padding: 0 20px;
  border-radius: 9999px;  /* Apple pill */
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;  /* 跟 Apple button-primary (17/400) 保持粗体一致 */
  letter-spacing: -0.224px;
  line-height: 1.0;
  transition: background-color 0.2s ease, transform 0.15s ease,
              color 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease;
  outline: none;
}
.diy_bg_but:focus-visible,
.diy_bg_but2:focus-visible,
#change-btn:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}
.diy_bg_but,
#change-btn,
.diy_bg_but.glass,
#change-btn.glass {
  /* shuding/liquid-glass: 蓝色主按钮 (不透明 0.85 让蓝色更饱和) */
  background-color: rgba(0, 102, 204, 0.85);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  color: var(--color-on-primary);
}
.diy_bg_but:hover,
#change-btn:hover {
  background-color: rgba(0, 113, 227, 0.95);
  box-shadow: var(--glass-shadow-hover);
}
.diy_bg_but:active,
#change-btn:active { transform: scale(0.96); }
.diy_bg_but2,
.diy_bg_but2.glass {
  /* shuding/liquid-glass: 透明次按钮 + 蓝色文字 */
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.diy_bg_but2:hover { box-shadow: var(--glass-shadow); }
.diy_bg_but2:active { transform: scale(0.96); }

/* 通用输入框（问候语） — shuding/liquid-glass 真实实现 */
.special-input,
.special-input.glass {
  width: 100%;
  max-width: 360px;
  height: 40px;
  padding: 0 14px;
  margin: 0;
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border-radius: 10px;
  outline: none;
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--color-ink);
  letter-spacing: -0.224px;
  box-shadow: var(--glass-shadow);
  transition: box-shadow 0.2s ease;
}
.special-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18), var(--glass-shadow);
}

/* 设置中搜索引擎选择 */
.set_choice .select_box2 {
  height: 44px;
  min-width: 200px;
  margin: 8px 0 12px;
  padding: 0 36px 0 16px;
  background-color: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
  font-size: 14px;
  color: var(--color-ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'><path d='M764.864 387.008a42.624 42.624 0 0 0-60.288 0L512 579.712 319.424 387.008a42.624 42.624 0 1 0-60.288 60.288l222.976 223.04a42.624 42.624 0 0 0 60.288 0l222.976-223.04a42.624 42.624 0 0 0 0-60.288z' fill='%237a7a7a'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.set_choice .select_box2:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
}

/* 引擎 chip (radiogroup) */
.engine-chip-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}
.engine-chip,
.engine-chip.glass {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.224px;
  line-height: 1.0;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
  outline: none;
}
/* chip: default + active(pressed) 两种态, 中间过渡用 transition 实现 */
.engine-chip:active { transform: scale(0.98); }
.engine-chip:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}
.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--color-ink-muted-48);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.engine-chip.is-active {
  /* 选中态: 蓝色液态玻璃 (不透明 0.85) */
  background-color: rgba(0, 102, 204, 0.85);
  -webkit-backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  backdrop-filter: url(#liquid-glass-strong) blur(0.5px) brightness(1.05) saturate(1.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-on-primary);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}
.engine-chip.is-active .chip-dot {
  background-color: var(--color-on-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* 警示框: 使用单色 Action Blue 替代原金色, 保持"single interactive color"原则 */
.set_notice {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  /* 黄色玻璃: 高饱和暖黄半透明 + 琥珀左边框 (与液态玻璃风格一致) */
  background-color: rgba(255, 200, 60, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-radius: 11px;
  border-left: 3px solid rgba(217, 119, 6, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(180, 120, 0, 0.10);
}
.set_notice_icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: rgba(245, 158, 11, 0.95);
}
.set_notice_icon svg { width: 18px; height: 18px; display: block; }
.set_notice-body { flex: 1 1 auto; }
.set_notice_title {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.224px;
  line-height: 1.29;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.set_notice_list {
  margin: 0;
  padding-left: 18px;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  line-height: 1.43;
  color: var(--color-ink-muted-80);
}
.set_notice_list li + li { margin-top: 2px; }

/* FAQ / 声明 内文排版 -> 已迁移到 .qa_list / .legal_list */
/* .Q_ui_box / .A_ui_box 已迁移到 .qa_chip (见上方) */

/* ========== Responsive (DESIGN-apple.md breakpoints) ========== */
@media (max-width: 1068px) {
  .box { max-width: 720px; }
  .showTime { font-size: var(--fs-display-md); }
}
@media (max-width: 833px) {
  .settings_box,
  .jump_out_box,
  .settings_box#settings_box { width: min(640px, 94vw); padding: 22px 24px 90px; }
  .about { width: min(560px, 94vw); padding: 22px 22px 26px; }
  .settings_box_title { font-size: 19px; }
  .set_title { font-size: 16px; }
}
@media (max-width: 734px) {
  .showTime { font-size: var(--fs-tagline); margin-top: 12vh; }
  .box { gap: var(--s-xs); }
  .inputBox input { height: 40px; font-size: 15px; }
  .select_box,
  .select_box2 { height: 40px; padding: 0 32px 0 14px; font-size: 13px; }
  .search_btn { width: 40px; height: 40px; }
  .settings_box, .jump_out_box, .about { border-radius: 14px; }
  .bg_choice_main { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .showTime { font-size: 18px; }
  .settings_box, .jump_out_box, .about {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 32px);
    padding: 20px 18px 80px;
    border-radius: 14px;
  }
  .settings_box_title { font-size: 22px; }
  .diy_bg {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .diy_bg input[type="file"] { max-width: 100%; }
  .diy_bg_but, .diy_bg_but2, #change-btn { width: 100%; }

  /* settings 弹窗分页: 窄屏把侧栏改造成顶部水平 tab */
  /* 桌面端用 absolute 定位; 窄屏改回 static + row 滚动 */
  /* settings 弹窗分页: 底部 tab 在窄屏 (≤640px) 也保留, 字号略缩, 圆角稍小 */
  /* 移动端中等屏: 弹窗更紧凑, tab 字号略缩, 隐藏 icon (只保留 label) */
  .settings_tabbar_wrap {
    max-width: 360px;
    /* 沿用桌面端 absolute + bottom: 16px, 不用 margin-top: auto */
  }
  .settings_tabbar,
  .settings_sidebar {
    padding: 3px;
    border-radius: var(--r-pill);
  }
  .settings_nav_item { padding: 7px 5px; font-size: 12px; }
  .settings_nav_icon { display: none; }
  /* 窄屏: 沿用桌面端 absolute + bottom: 16px, pages 占满 body 全部高度, tab 浮在上面 */
  .settings_box#settings_box { width: calc(100vw - 24px); }
}
@media (max-width: 419px) {
  .showTime { font-size: 16px; }
  .box { flex-direction: column; }
  .select_box,
  .select_box2 { width: 100%; }
  .buttonBox { width: 100%; display: flex; justify-content: flex-end; }
  .inputBox { width: 100%; }
  .settings_box, .jump_out_box, .about {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: 20px 16px 80px;
  }
  /* 移动端全屏弹窗: tab 略缩, 继续用 margin-top: auto 贴底 */
  .bg_choice_main { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .settings_box_title { font-size: 20px; }
  .close_about_btn svg { width: 24px; height: 24px; }
}

/* ============================================================
   账号系统 (V4.0.3) - 弹窗 + 顶栏入口 + 账号 tab
   ============================================================ */

/* 3 个 auth modal 复用 .about 的样式, 仅细化内部 */

/* 引导文字 */
.auth_lead {
  margin: 0 0 16px 0;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  line-height: 1.55;
  color: var(--color-ink-muted-48);
}

.auth_hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-ink-muted-48);
  margin-left: 6px;
}

.auth_error {
  margin: 4px 0 0;
  padding: 8px 12px;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: #C42F2F;
  background: rgba(255, 90, 90, 0.10);
  border: 1px solid rgba(255, 90, 90, 0.30);
  border-radius: 8px;
  letter-spacing: -0.2px;
}

.auth_actions {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 8px;
}
.auth_actions .diy_bg_but,
.auth_actions .diy_bg_but2 { width: 100%; }

.auth_switch {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.auth_link {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary, #007AFF);
  cursor: pointer;
  letter-spacing: -0.2px;
  transition: opacity 0.15s;
}
.auth_link:hover { opacity: 0.7; }
.auth_link:active { opacity: 0.5; }

/* 顶栏账号入口 (浮在右上, 与汉堡按钮并列) */
.account_entry {
  position: fixed;
  top: 18px;
  right: 74px;        /* 汉堡按钮在 ~14px, 直径 38px → 留出 62px 间隙 */
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  z-index: 100;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  color: var(--color-ink);
}
.account_entry:hover { transform: scale(1.04); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.account_entry:active { transform: scale(0.96); }
.account_entry .icon { width: 20px; height: 20px; color: var(--color-ink); }

.account_entry--avatar { padding: 0; overflow: hidden; }
.account_entry_avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--glass-bg-strong);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 账号菜单 (下拉) */
.account_menu {
  position: fixed;
  min-width: 240px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
  z-index: 140;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-text);
}
.account_menu_email {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.2px;
  word-break: break-all;
}
.account_menu_sync {
  font-size: 12px;
  color: var(--color-ink-muted-48);
  margin-top: -4px;
}
.account_menu_actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.account_menu_actions .diy_bg_but,
.account_menu_actions .diy_bg_but2 { width: 100%; }

/* 账号 tab 内的用户卡片 */
.account_user_card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.account_avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.06);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted-48);
}
.account_avatar svg { width: 28px; height: 28px; opacity: 0.6; }
.account_user_meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.account_email {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.2px;
  word-break: break-all;
}
.account_sync_state {
  font-family: var(--font-text);
  font-size: 12px;
  color: var(--color-ink-muted-48);
  letter-spacing: -0.1px;
}

/* 隐藏老占位元素 (保险) */
.settings_account_placeholder { display: none !important; }

/* 移动端: 顶栏入口贴右上 (汉堡可能隐藏) */
@media (max-width: 480px) {
  .account_entry { top: 12px; right: 60px; width: 34px; height: 34px; }
  .account_entry .icon { width: 18px; height: 18px; }
  .account_menu { right: 8px !important; min-width: 220px; }
}

/* hidden 属性: 强制隐藏 (防止 display: flex !important 之类的覆盖) */
[hidden] { display: none !important; }